<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>%ETAPE% %NOM DE LA L'ETAPE%</title>
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
	padding-top: 60px;
	/* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" media="screen"
	type="text/css" />
<link href="css/jquery.dataTables.css" rel="stylesheet" />
<link href="css/jquery.dataTables_themeroller.css" rel="stylesheet" />
<link href="css/demo_page.css" rel="stylesheet" />
<link href="css/demo_table.css" rel="stylesheet" />
<link href="css/demo_table_jui.css" rel="stylesheet" />

<!-- Les scripts -->

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery.dataTables.js"></script>
<script type="text/javascript" src="script/jquery.easing.js"></script>
<script type="text/javascript" src="script/jquery.dimensions.js"></script>
<script type="text/javascript" src="script/jquery.accordion.js"></script>
<script type="text/javascript" src="script/bootstrap.js"></script>
<script type="text/javascript" src="script/bootstrap-transition.js"></script>

</head>

<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> <a class="brand" href="#">Geek Student Inside</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li><a href="index.html">Accueil</a></li>
						<li><a href="profil.html">Profil</a></li>
						<li><a href="editerChasse.html">Editer chasse</a></li>
						<li><a href="listerChasses.html">Lister chasses</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<h3>Etape 1 : Son sourire énigmatique reste un des mystères de la peinture.</h3>

		<!-- Ici le contenu de la page -->
		<div id="myCarousel" class="carousel slide">
			<div class="carousel-inner">
				<div class="item">
					<img src="images/ritz.jpg" alt="">
				</div>
				<div class="item active">
					<img src="images/salles-etats.jpg" alt="">
				</div>
			</div>
		</div>
		<legend>Description Etape</legend>
		<p>La réponse n'est pas Mona-Lisa, c'est le nom de l'oeuvre.</p>
		<legend>Enigme</legend>
		<p>C'est une peinture de Leonardo Da Vinci.</p>
		<form>
			<fieldset>
				<legend>Réponse</legend>
				<input class="input-small" type="text" placeholder="Votre Réponse…">
				<button type="submit" class="btn btn-success btn-large" style="float: right">Valider</button>
			</fieldset>
		</form>
		<a href="#" class="btn btn-large" style="float: left">Retour</a>
		<a href="#" class="btn btn-large" style="float: right">Passer</a>
	</div>
</body>
<script type="text/javascript">$('.carousel').carousel({interval: 2000})</script>
</html>